<!doctype html>
<html>
<head>

    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <link rel="stylesheet" href="css/toastr.min.css" type="text/css"/>

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/underscore.js"></script>
    <script type="text/javascript" src="js/backbone.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/toastr.min.js"></script>
    <script type="text/javascript" src="js/pages.js"></script>

    <title>Administrator page</title>

</head>


<body>


<div class="navbar" id="tabs">
    <div class="navbar-inner">
        <a href="index.html" class="brand">OMS</a>
        <ul class="nav">
            <li><a href="ordering.html">Ordering</a></li>
            <li class="active"><a href="#">Administration</a></li>
            <li><a href="items.html">Items Management</a></li>
        </ul>
        <div id="userinfo">
            Logged user: <a href="#" title="User Info" id="username">Alex</a> &nbsp;
            <a href="#" title="Log Out" id="button-exit"><img src="img/logout.png"/></a>
        </div>
    </div>


</div>

<div class="content">

    <div>This page is appointed for creating new and managing existing users</div>
    <a class="btn" id="create" href="">Create New User</a>

    <form class="form-inline well">
        <legend>Search by</legend>
        <div id="search">
            Field Filter<br>

            <div id="search-data">
                <select name="filter" id="filter">
                    <option value="all">All Columns</option>
                    <option value="login">User Name</option>
                    <option value="firstName">First Name</option>
                    <option value="lastName">Last Name</option>
                    <option value="role">Role</option>
                </select>

                <select name="method" id="method">
                    <option value="exact">Equals</option>
                    <option value="ne">Not equal to</option>
                    <option value="start">Starts with</option>
                    <option value="anywhere">Contains</option>
                    <option value="nl">Does not contain</option>
                </select>

                <input type="text" name="criteria" id="criteria"/>
            </div>
            <div id="search-button">
                <a class="btn" href="#" id="search-btn">Search</a>
            </div>
        </div>


    </form>

    <a href="#" class="btn" id="show-paging">Show <span>25</span> items</a>

    <div id="userListFrame">
        <table class="table-hover table table-bordered" border="1" id="table-users">
            <thead>
            <tr>
                <td>User Name</td>
                <td>First Name</td>
                <td>Last Name</td>
                <td>Role</td>
                <td>Email</td>
                <td>Region</td>
                <td>Edit</td>
                <td>Remove</td>
                <td>Duplicate</td>
            </tr>
            </thead>

        </table>
    </div>
    <div class="footer">
        <div id="pages">
            Page #: <span id="pageIndex">3</span> from <span id="totalPages">10</span>
        </div>
        <div class="text-center">
            <button class="btn" id="first">First</button>
            <button class="btn" id="backward">Backward</button>
            <button class="btn" id="forward">Forward</button>
            <button class="btn" id="last">Last</button>
        </div>
    </div>


    <div id="foot">

    </div>
</div>



<div class="modal hide" id="modal">
    <div class="modal-header">
        <h4>Warning</h4>
    </div>
    <div class="modal-body">
        <p></p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-primary">Yes</a>
        <a href="#" class="btn" id="no">No</a>
    </div>
</div>
<div id="template"></div>

<script type="text/template" id="create-template">
    <div class="container" id="create-user">
        <div class="row">
            <div class="span2"></div>
            <div class="span8">
                <form class="form-horizontal well">


                    <legend><%= header %> User</legend>
                    <div>This page is appointed for <%= message %> user for particular role</div>
                    <div class="control-group">
                        <label class="control-label" for="username">Login Name</label>

                        <div class="controls">
                            <input type="text" id="name" name="login"/>
                        </div>

                    </div>

                    <div class="control-group">
                        <label class="control-label" for="firstname">First Name</label>

                        <div class="controls">
                            <input type="text" id="firstname" name="firstName"/>
                        </div>

                    </div>

                    <div class="control-group">
                        <label class="control-label" for="lastName">Last Name</label>

                        <div class="controls">
                            <input type="text" id="lastname" name="lastname"/>
                        </div>

                    </div>

                    <div class="control-group">
                        <label class="control-label" for="password">Password</label>

                        <div class="controls">
                            <input type="password" id="password" name="password"/>
                        </div>

                    </div>

                    <div class="control-group">
                        <label class="control-label" for="password">Confirm Password</label>

                        <div class="controls">
                            <input type="password" id="confirm-password" name="confirm-password"/>
                        </div>

                    </div>

                    <div class="control-group">
                        <label class="control-label" for="email">Email Address</label>

                        <div class="controls">
                            <input type="email" id="email" name="mail"/>
                        </div>

                    </div>

                    <div class="control-group">
                        <label class="control-label" for="region">Region</label>

                        <div class="controls">
                            <select name="region" id="region">
                                <option value="NORTH">North</option>
                                <option value="SOUTH">South</option>
                                <option value="EAST">East</option>
                                <option value="WEST">West</option>
                            </select>
                        </div>

                    </div>

                    <legend>Role</legend>
                    <ul>
                        <li><input type="radio" name="role" value="4">&nbsp;Administrator</input></li>
                        <li><input type="radio" name="role" value="1">&nbsp;Merchandiser</input></li>
                        <li><input type="radio" name="role" value="2">&nbsp;Supervisor</input></li>
                        <li><input type="radio" name="role" value="3" checked>&nbsp;Customer</input></li>
                    </ul>


                    <a href="#" class="btn btn-primary" id="create-btn"><%= button %></a>


                    <a href="#" class="btn" id="cancel">Cancel</a>


                    <a href="#" class="btn" id="refresh">Refresh</a>


                </form>
            </div>

        </div>
    </div>
</script>

<script id="row-user" type="text/template">
    <td><%=login %></td>
    <td><%=firstName %></td>
    <td><%=lastName %></td>
    <td><%=role.description %></td>
    <td><%=mail %></td>
    <td><%=region %></td>
    <td><a href="#" class="edit" attr="<%= userId %>">Edit</a></td>
    <td><a href="#" class="remove" attr="<%= userId %>">Remove</a></td>
    <td><a href="#" class="duplicate" attr="<%= userId %>">Duplicate</a></td>
</script>
</body>


</html>